<!DOCTYPE html>
<!--[if IE 8]>
<html lang="zh-CN" class="ie8"> <![endif]-->
<html lang="zh-CN">

<head>
    <link rel="shortcut icon" href="https://www.itsource.cn/img/logo_small.jpg">
    <meta charset="utf-8"/>
    <title>用户注册 - 用户中心 </title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>

    <link type="text/css" rel="stylesheet" href="css/common.css"/>
    <link type="text/css" rel="stylesheet" href="css/register.css"/>
    <link type="text/css" rel="stylesheet" href="css/color-style.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/placeholder.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script type="text/javascript" src="js/jquery.method.js"></script>
    <script type="text/javascript" src="js/jquery.modal.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="./js/plugins/vue/dist/vue.js"></script>
    <script type="text/javascript" src="./js/plugins/axios/dist/axios.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/axios.common.js"></script>
    <link rel="stylesheet" href="js/jqueryAlert/alert.css">
    <script src="js/jqueryAlert/alert.js"></script>
</head>

<body>
<div id="myApp">
    <div class="header w990">
        <div class="logo-info">
            <a href="http://user.ymcc.com" class="logo">
                <img alt="" src="css/mall_logo_0.png"/>
            </a>
            <span class="findpw">欢迎注册</span>
        </div>
    </div>
    <div class="reg-content">
        <div class="w990">
            <div class="reg-form">
                <div class="reg-con">

                    <div class="reg-type">
                        <p class="login-info">
                            我已经注册，现在就
                            <a href="http://user.ymcc.com:6003/login.html" title="去登录" class="color">登录</a>
                        </p>

                        <ul class="clearfix">
                            <li class="active">
                                <a href="javascript:void(0);">手机注册</a>
                            </li>
                            <li>
                                <a href="/register/email.html">邮箱注册</a>
                            </li>
                        </ul>

                    </div>

                    <div class="reg-wrap" style="background: url(css/register-bg.jpg) no-repeat 480px 60px;">
                        <div class="reg-wrap-con">
                            <!-- 手机注册 start -->
                            <form id="MobileRegisterModel" class="form-horizontal" name="MobileRegisterModel"
                                  action="/register/mobile.html" method="post">
                                <input type="hidden" name="_csrf"
                                       value="alJHek5GNGsyKi9NCj5/Ej8aGCV9E109PApyPX8XYRFSFgA1IAkMHA==">
                                <!-- 手机号 -->
                                <div class="form-group form-group-spe">
                                    <label for="mobileregistermodel-mobile" class="input-left">
                                        <span class="spark">*</span>
                                        <span>手机号：</span>
                                    </label>
                                    <div class="form-control-box">

                                        <input type="text" v-model="formParams.mobile" id="mobileregistermodel-mobile"
                                               class="form-control" name="MobileRegisterModel[mobile]">

                                    </div>

                                    <div class="invalid"></div>
                                </div>
                                <input style="display: none">
                                <!-- 密码 -->
                                <div class="form-group form-group-spe">
                                    <label for="mobileregistermodel-password" class="input-left">
                                        <span class="spark">*</span>
                                        <span>密码：</span>
                                    </label>
                                    <div class="form-control-box">

                                        <input v-model="formParams.password" type="password" id="password"
                                               class="form-control" name="MobileRegisterModel[password]" value=""
                                               autocomplete="off">
                                        <i class="fa fa-eye-slash pwd-toggle" data-id="password"></i>

                                    </div>

                                    <div class="invalid"></div>
                                </div>
                                <!-- 验证码 -->

                                <div class="form-group form-group-spe">
                                    <label for="mobileregistermodel-captcha" class="input-left">

                                        <span>验证码：</span>
                                    </label>
                                    <div class="form-control-box">

                                        <input v-model="formParams.imageCode" type="text" id="captcha"
                                               class="input-small" name="MobileRegisterModel[captcha]">
                                        <label class="captcha">

                                            <img id="captcha-image-temp" @click="getImageCode"
                                                 class="captcha-image-temp" :src="imageCode" alt="点击换图" title="点击换图"
                                                 style="vertical-align: middle; cursor: pointer;width: 120px;height: 34px;">

                                        </label>

                                    </div>

                                    <div class="invalid"></div>
                                </div>

                                <!-- 短信校验码 -->
                                <div class="form-group form-group-spe">
                                    <label for="mobileregistermodel-sms_captcha" class="input-left">
                                        <span class="spark">*</span>
                                        <span>短信校验码：</span>
                                    </label>
                                    <div class="form-control-box">

                                        <input v-model="formParams.smsCode" type="text"
                                               id="mobileregistermodel-sms_captcha" class="input-small"
                                               name="MobileRegisterModel[sms_captcha]">

                                        <button type="button" @click="sendSmsCode" class="phonecode">获取短信校验码</button>

                                    </div>

                                    <div class="invalid"></div>
                                </div>
                                <!-- 注册邀请码 -->

<!--                                <div class="form-group form-group-spe">-->
<!--                                    <label for="mobileregistermodel-invite_code" class="input-left">-->

<!--                                        <span>注册邀请码：</span>-->
<!--                                    </label>-->
<!--                                    <div class="form-control-box">-->

<!--                                        <input type="text" id="mobileregistermodel-invite_code" class="input-small"-->
<!--                                               name="MobileRegisterModel[invite_code]">-->

<!--                                    </div>-->

<!--                                    <div class="invalid"></div>-->
<!--                                </div>-->

                                <div class="form-group m-10">
                                    <label class="input-left">&nbsp;</label>
                                    <div class="form-control-box">
                                        <label for="remember1">
                                            <input type="checkbox" value="0" name="remember" id="remember1"
                                                   class="checkbox" checked="checked"/>
                                            <span>
											我已阅读并同意
											<a href="javascript:void(0);" class="user_protocol">《用户注册协议》</a>
										</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="reg-btn">
                                    <div class="form-group form-group-spe">
                                        <label for="" class="input-left">


                                        </label>
                                        <div class="form-control-box">

                                            <input type="button" @click="submitRegister"
                                                   class="btn-img btn-entry bg-color" id="btn_submit" name="btn_submit"
                                                   value="同意协议并注册">

                                        </div>

                                        <div class="invalid"></div>
                                    </div>
                                </div>

                            </form>
                            <!-- 手机注册 end -->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <!-- 底部 -->
    <div class="site-footer">

        <div class="footer-desc-copyright" style="border-top: 1px solid #eeeeee">

            <p class="footer-ecscinfo">
                <a href="#">首页</a>
                |

                <a href="#">隐私保护</a>
                |

                <a href="#">联系我们</a>
                |

                <a href="#">免责条款</a>
                |

                <a href="#">公司简介</a>
                |

                <a href="#">意见反馈</a>

                |
                <a rel="nofollow" target="_blank" href="#">会员登录</a>
                |
                <a rel="nofollow" target="_blank" href="http://bbs.ymcc.com/">会员论坛</a>
                |
                <a href="javascript:;" rel="nofollow">客服热线028-86261949</a>
            </p>
            <p class="footer-otherlink">
                <a title="源码商城" target="_blank" href="http://ymcc.com">源码商城</a>

                |

                <a title="菁鱼课堂" target="_blank" href="http://user.ymcc.com">菁鱼课堂</a>

                |

                <a title="资讯速递" target="_blank" href="http://user.ymcc.com">资讯速递</a>

                |

                <a title="快递查询" target="_blank" href="http://m.kuaidi100.com">快递查询</a>

                |

                <a title="论坛" target="_blank" href="http://bbs.itsource.com/forum.php">会员论坛</a>

                |

                <a title="源代码教育咨询有限公司" target="_blank" href="http://user.ymcc.com">源代码教育咨询有限公司</a>

            </p>

            <p class="footer-beian"> ICP备案证书号:
                <a rel="nofollow" target="_blank" href="#">蜀ICP备88888888号-1</a>
                <a rel="nofollow" target="_blank" href="#"><i></i>蜀公网安备 45323525326664号</a>
            </p>
            <p class="footer-Copyright">Copyright &copy; 2017
                <a target="_blank" style="margin:0;padding:0;" href="http://www.saodangzu.com/">ymcc.com</a> All Rights
                Reserved. </p>
            <p>&nbsp;</p>

            <p class="footer-fp-img">
                <a target="_blank" href="#"><img src="img/test/kxwz.png"></a>
                <a target="_blank" href="#"><img src="img/test/smyz.png"></a>
                <a target="_blank" href="#"><img src="img/test/cxyz.jpg"></a>
                <a target="_blank" href="#"><img src="img/test/hyyz.png"></a>
                <a target="_blank" href="#"><img src="img/test/jpfw.png"></a>
            </p>
        </div>

    </div>
    <!-- 底部 _end-->
</div>
</body>

<script type="application/javascript">
    $().ready(function () {
        new Vue({
            el: "#myApp",
            data(){
                return {
                    imageCodePrefix: "data:image/jpg;base64,",
                    imageCode: '',
                    formParams: {
                        mobile: '18244444444',
                        password: '123456',
                        imageCode: '',
                        smsCode: '',
                        regChannel: 1 //注册的渠道
                    }
                }
            },
            methods: {
                //前端生成key - 就用来传递到后端来保存或获取redis图形验证码
                createUuid(){
                    var s = [];
                    var hexDigits = "0123456789abcdefghi";
                    for (var i = 0; i < 36; i++) {
                        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                    }
                    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                    s[8] = s[13] = s[18] = s[23] = "-";

                    var uuid = s.join("");
                    return uuid;
                },
                getUUID(){
                    let uuid = localStorage.getItem("uuid")
                    if(uuid == null || uuid == undefined || uuid == ''){
                        uuid = this.createUuid()
                        localStorage.setItem("uuid",uuid)
                        return uuid;
                    }
                    return uuid;
                },
                // 获取图片验证码
                getImgCode(){
                    let uuid = this.getUUID();
                    this.$http.get("/common/getImgCode/"+uuid).then(res=>{
                        console.log(res)
                        this.imageCode = this.imageCodePrefix + res.data.data
                    })
                },
                submitRegister() {
                    //1.判断手机号不为空
                    if (!this.formParams.mobile) {
                        $.alert("手机号不能为空");
                        return;
                    }

                    //1.判断手机号不为空
                    if (!this.formParams.password) {
                        $.alert("密码不能为空");
                        return;
                    }

                    // 2.判断图片验证码不为空
                    if(!this.formParams.smsCode){
                        $.alert("短信验证码不能为空");
                        return;
                    }


                    //4.发送ajax请求
                    this.$http.post("/user/user/register", this.formParams).then(res => {
                        var ajaxResult = res.data;
                        if (ajaxResult.success) {
                            $.alert("注册成功");
                            window.location.href = "http://127.0.0.1:6003/login.html";
                        } else {
                            $.alert("发送失败:" + ajaxResult.message);
                        }
                    })
                },
                sendSmsCode(event) {
                    //1.判断手机号不为空
                    if (!this.formParams.mobile) {
                        $.alert("手机号不能为空");
                        return;
                    }

                    // 2.判断图片验证码不为空
                    if(!this.formParams.imageCode){
                    	$.alert("图片验证码不能为空");
                    	return;
                    }

                    //3.获取按钮，禁用按钮
                    var sendBtn = $(event.target);
                    sendBtn.attr("disabled", true);

                    var param ={
                        "mobile" : this.formParams.mobile,
                        "imgKey" : localStorage.getItem("uuid"),
                        "imgCode" : this.formParams.imageCode
                    }

                    //4.发送ajax请求
                    this.$http.post("/common/sendSmsCode" , param).then(res => {
                        var ajaxResult = res.data;
                        console.log(res.data)
                        if (ajaxResult.success) {
                            $.alert("手机验证码已经发送到您的手机，请在10分钟内使用");
                            //4.1.发送成：倒计时
                            var time = 60;

                            var interval = window.setInterval(function () {
                                //每一条倒计时减一
                                time = time - 1;

                                //把倒计时时间搞到按钮上
                                sendBtn.html(time + "秒后重发");

                                //4.2.倒计时完成恢复按钮
                                if (time <= 0) {
                                    sendBtn.html("重新发送");
                                    sendBtn.attr("disabled", false);
                                    //清除定时器
                                    window.clearInterval(interval);
                                }
                            }, 1000);
                        } else {
                            //4.3.发送失败：提示，恢复按钮
                            sendBtn.attr("disabled", false);
                            $.alert("发送失败:" + ajaxResult.message);
                        }
                    }).catch(error => {
                        //4.3.发送失败：提示，恢复按钮
                        sendBtn.attr("disabled", false);
                        $.alert("发送失败:" + error.message);
                    })
                },
                getImageCode() {
                    //发送请求到后台获取数据  VerifycodeController
                    let imageCodeKey = localStorage.getItem("uuid");
                    if (!imageCodeKey || imageCodeKey === '') {
                        imageCodeKey = this.createUuid();
                        localStorage.setItem("uuid", imageCodeKey);
                    }
                    this.$http.get("/common/getImgCode/" + imageCodeKey).then(res => {
                        //res.data :就是base64编码后的图片的字符串
                        this.imageCode = this.imageCodePrefix + res.data.data;
                    })
                },
            },
            //钩子函数
            mounted() {
                this.getImgCode()
            }
        })

        $(".user_protocol").click(function () {
            if ($.modal($(this))) {
                $.modal($(this)).show();
            } else {
                var modal = $.modal({
                    title: "用户注册协议",
                    trigger: $(this),
                    content: $("#user_protocol").html()
                });
                modal.addButton({
                    text: "同意协议并继续",
                    click: function () {
                        $("input[type='checkbox']").prop("checked", true);
                        $("#btn_submit").removeAttr("disabled");
                        this.hide();
                    }
                });
            }
        });
    });

</script>

<!-- 验证码脚本 -->
<script type="text/javascript" src="js/jquery.captcha.js"></script>
<!-- 表单验证 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.custom.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<!-- 验证规则 -->
<script id="client_rules" type="text">
								[{"id": "mobileregistermodel-mobile", "name": "MobileRegisterModel[mobile]", "attribute": "mobile", "rules": {"required":true,"messages":{"required":"手机号不能为空。"}}},{"id": "mobileregistermodel-password", "name": "MobileRegisterModel[password]", "attribute": "password", "rules": {"required":true,"messages":{"required":"密码不能为空。"}}},{"id": "mobileregistermodel-sms_captcha", "name": "MobileRegisterModel[sms_captcha]", "attribute": "sms_captcha", "rules": {"required":true,"messages":{"required":"短信校验码不能为空。"}}},{"id": "mobileregistermodel-mobile", "name": "MobileRegisterModel[mobile]", "attribute": "mobile", "rules": {"match":{"pattern":/^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}$/,"not":false,"skipOnEmpty":1},"messages":{"match":"手机号是无效的。"}}},{"id": "mobileregistermodel-mobile", "name": "MobileRegisterModel[mobile]", "attribute": "mobile", "rules": {"ajax":{"url":"\/register\/client-validate","model":"c2VydmljZVxyZWdpc3Rlclxtb2RlbHNcTW9iaWxlUmVnaXN0ZXJNb2RlbA==","attribute":"mobile","params":[]},"messages":{"ajax":"{attribute}\u0022{value}\u0022已被注册。"}}},{"id": "mobileregistermodel-password", "name": "MobileRegisterModel[password]", "attribute": "password", "rules": {"password":{"pattern":/^.{6,20}$/,"not":false,"skipOnEmpty":1},"match":{"pattern":/\s+/,"not":true,"skipOnEmpty":1},"messages":{"password":"密码长度为6-20个字符，建议由字母、数字和符号两种以上。","match":"密码不能包含空格。"}}},{"id": "mobileregistermodel-captcha", "name": "MobileRegisterModel[captcha]", "attribute": "captcha", "rules": {"captcha":{"hash":439,"hashKey":"niiCaptcha/site/captcha","caseSensitive":false},"messages":{"captcha":"验证码不正确。"}}},]


</script>
<script type="text/javascript">
    $().ready(function () {
        var validator = $("#MobileRegisterModel").validate();
        // 验证规则，此验证规则会影响编辑器中JavaScript的的格式化操作
        $.validator.addRules($("#client_rules").html());
        $("#btn_submit").click(function () {
            if (!validator.form()) {
                return;
            }

            $("#MobileRegisterModel").submit();

            return false;
        });


    });
</script>
<script type="text/javascript">
    $(function () {
        $("input[type='checkbox']").click(function () {
            if ($(this).is(":checked")) {
                $("#btn_submit").removeAttr("disabled");
            } else {
                $("#btn_submit").attr("disabled", true);
            }
        });
    });
</script>
</html>